<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="asbodyinfoa">
          <div class="infoadd">班级管理</div>

          <div class="buttons">
            <div>
              <el-button @click="dialogFormVisible = true">添加班级</el-button>
            </div>
          </div>
          <!-- 添加弹框 -->
          <el-dialog title="添加班级" v-model="dialogFormVisible">
            <el-form :model="formdata">
              <el-form-item label="所选课程">
                <el-select
                  placeholder="请选择班级名称"
                  v-model="formdata.courseid"
                >
                  <div v-for="item in urriculumInfos">
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </div>
                </el-select>
              </el-form-item>

              <el-form-item label="班级名称">
                <el-input
                  v-model="formdata.name"
                  autocomplete="off"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="计划课时">
                <el-input-number
                  v-model="formdata.coursecounts"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="100"
                ></el-input-number>
              </el-form-item>

              <el-form-item label="开班日期">
                <el-date-picker
                  v-model="formdata.startdate"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY/MM/DD"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="结班日期">
                <el-date-picker
                  v-model="formdata.enddate"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY/MM/DD"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addclass">确 定</el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 排课 -->
          <el-dialog
            title="排课"
            v-model="dialogFormVisibles"
            width="70%"
            style="height: 2000px"
          >
            <el-form :model="formdata">
              <div class="bodypk">
                <div>
                  <div class="teachera">
                    <div>主讲老师</div>
                    <div v-show="showRentPrisesac">
                      <router-link
                        to=""
                        @click="
                          showRentPrisesac = false;
                          showRentPrisesa = true;
                          showRentPrisesas = true;
                        "
                        >添加助教</router-link
                      >
                    </div>
                    <div v-show="showRentPrisesas">
                      <router-link
                        to=""
                        @click="
                          showRentPrisesa = false;
                          showRentPrisesac = true;
                          showRentPrisesas = false;
                        "
                        >取消助教</router-link
                      >
                    </div>
                  </div>
                  <div>
                    <el-form-item>
                      <el-select
                        v-model="formInline.region"
                        placeholder="活动区域"
                        size="small"
                        style="width: 130px"
                      >
                        <el-option label="区域一" value="shanghai"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div v-show="showRentPrisesa">
                  <div class="teachera">
                    <div>助教老师</div>
                  </div>
                  <div>
                    <el-form-item>
                      <el-select
                        v-model="formInline.region"
                        placeholder="活动区域"
                        size="small"
                        style="width: 130px"
                      >
                        <el-option label="区域一" value="shanghai"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div>
                  <div class="teachera">
                    <div>教师</div>
                  </div>
                  <div>
                    <el-form-item>
                      <el-select
                        v-model="formInline.region"
                        placeholder="活动区域"
                        size="small"
                        style="width: 130px"
                      >
                        <el-option label="区域一" value="shanghai"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div>
                  <div class="teachera">
                    <div>单节课扣学员课时</div>
                  </div>
                  <div>
                    <el-form-item size="small">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="bodypk1">
                <el-tabs>
                  <el-tab-pane label="单次排课" name="first">
                    <div class="adds">
                      <div>
                        <div style="margin-bottom: 15px; margin-left: 15px">
                          开课日期
                        </div>
                        <div class="block">
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                            size="small"
                          >
                          </el-date-picker>
                        </div>
                        <div>
                          <div style="margin: 20px 0 20px 10px">上课时间</div>
                          <div style="margin-left: 20px">
                            <el-time-select
                              size="small"
                              placeholder="起始时间"
                              v-model="startTime"
                              start="08:30"
                              step="00:15"
                              end="18:30"
                            >
                            </el-time-select
                            >--
                            <el-time-select
                              size="small"
                              placeholder="结束时间"
                              v-model="endTime"
                              start="08:30"
                              step="00:15"
                              end="18:30"
                              :minTime="startTime"
                            >
                            </el-time-select>
                          </div>
                        </div>
                        <div class="addss">
                          <div style="font-size: 16px; font-weight: bold">
                            选择学员(0)
                          </div>
                          <div style="color: blue; cursor: pointer">
                            添加学员
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="批量排课" name="second">
                    <div class="adds">
                      <div>
                        <div style="margin-bottom: 15px; margin-left: 15px">
                          开课日期
                        </div>
                        <div class="block">
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                            size="small"
                          >
                          </el-date-picker>
                        </div>
                        <div>
                          <div style="margin: 20px 0 20px 10px">上课时间</div>
                          <div style="margin-left: 20px">
                            <el-time-select
                              size="small"
                              placeholder="起始时间"
                              v-model="startTime"
                              start="08:30"
                              step="00:15"
                              end="18:30"
                            >
                            </el-time-select
                            >--
                            <el-time-select
                              size="small"
                              placeholder="结束时间"
                              v-model="endTime"
                              start="08:30"
                              step="00:15"
                              end="18:30"
                              :minTime="startTime"
                            >
                            </el-time-select>
                          </div>
                        </div>
                        <div class="addss">
                          <div style="font-size: 16px; font-weight: bold">
                            选择学员(0)
                          </div>
                          <div style="color: blue; cursor: pointer" @click="">
                            添加学员
                          </div>
                        </div>
                      </div>
                      <div style="display: flex">
                        <div>
                          <div style="margin-bottom: 20px">结束方式</div>
                          <div>
                            <el-radio v-model="radio" label="1"
                              >按课节</el-radio
                            >
                            <el-radio v-model="radio" label="2"
                              >按日期</el-radio
                            >
                          </div>
                        </div>
                        <div style="margin-left: 60px">
                          <div style="margin-bottom: 8px">排课总数</div>
                          <div>
                            <el-form-item>
                              <el-input
                                v-model="formInline.user"
                                size="small"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisibles = false"
                  >确 定</el-button
                >
              </span>
            </template>
          </el-dialog>
          <!-- 弹框end -->
          <div class="infosaa">
            <div class="infosa">
              <div class="infoa">
                <div class="classInfoas">
                  <el-form :inline="true" :model="formInline">
                    <!-- 下拉 -->
                    <!-- <el-form-item class="classInfoas">
                      <el-select
                        v-model="getItem.name"
                        placeholder="请选择"
                        size="mini"
                        :popper-append-to-body="false"

                      >
                        <div
                          :model="urriculumInfos"
                          v-for="item in urriculumInfos"
                        >
                          <el-option
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </div>
                      </el-select>
                    </el-form-item> -->
                    <div>
                      <input
                        type="text"
                        placeholder="请输入班级名称"
                        style="padding-left: 15px"
                        v-model="queryInfo.name"
                      />
                    </div>
                  </el-form>
                  <div class="searchas" @click="getItemList">
                    <i class="el-icon-search"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column
              prop="name"
              width="185px"
              label="班级名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="coursename"
              width="185px"
              label="课程"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="teacherslist"
              width="185px"
              label="老师"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="students"
              width="185px"
              label="人数"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="coursecounts"
              width="185px"
              label="计划课时"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="schcourses"
              width="185px"
              label="已排课时"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="endcourses"
              width="185px"
              label="已上课时"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip>
              <template #default="scope">
                <div v-show="showa == 1">
                  <el-button type="primary" round size="mini">修改</el-button>
                  <el-button
                    type="primary"
                    round
                    size="mini"
                    @click="dialogFormVisibles = true"
                    >排课</el-button
                  >
                  <el-button type="primary" round size="mini">课表</el-button>
                  <el-button
                    type="danger"
                    round
                    size="mini"
                    @click="classMdelete(scope)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="queryInfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      // 添加数据
      formdata: {
        // courseid:'',
        // coursename:'',
        // name:'',
        // startdae:'',
        // enddate:'',
        // students:'',
        // coursecouts:'',
        // schcourses:'',
        // endcourses:'',
        // teacherslist:'',
        // coursecounts:''
      },
      // 上课时间
      startTime: "",
      endTime: "",
      // 结束方式
      radio: "1",
      // 开课日期
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      shortcuts: [
        {
          text: "Today",
          value: new Date(),
        },
        {
          text: "Yesterday",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
          })(),
        },
        {
          text: "A week ago",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
          })(),
        },
      ],
      value1: "",
      value2: "",
      // 开班日期结班日期
      shortcuts: [
        {
          text: "今天",
          value: new Date(),
        },
        {
          text: "昨天",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
          })(),
        },
        {
          text: "一周前",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
          })(),
        },
      ],
      showRentPrisesa: false,
      showRentPrisesas: false,
      showRentPrisesac: true,
      value1: "",
      value2: "",
      value3: "",
      defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
      // 计划课时
      num: 1,
      // 分页
      queryInfo: {
        page: 1,
        psize: 5,
        name: "",
      },
      total: 0,
      // 操作
      showa: "2",
      //  首页搜索
      classInfoas: "",
      dialogFormVisible: false,
      dialogFormVisibles: false,

      form: {
        name: "",
      },
      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
      formInline: {
        user: "",
        region: "",
      },
      urriculumInfos: [],
    };
  },
  created() {
    this.getItemList();
    // 班级搜索下拉
    this.urriculumInfo();
  },
  methods: {
    // 添加班级
    async addclass() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/classes/add",
        this.formdata
      );
      if (res.errCode == 10000) {
        this.$message.success("添加成功");
        (this.dialogFormVisible = false), this.getItemList();
      } else {
        this.$message.error("添加失败");
      }
    },
    // 计划课时
    handleChange(value) {
      // console.log(value);
    },
    // 分页
    handleSizeChange(val) {
      this.queryInfo.psize = val;
      this.getItemList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      console.log(`当前页: ${val}`);
    },
    // 删除
    async classMdelete(manage) {
      const elses = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (elses !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const classId = manage.row.id;
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classes/delete?id=" + classId
      );
      this.getItemList();
      if (res.errCode == 10000) {
        this.$message.success("删除成功");
      } else {
        this.$message.error("删除失败");
      }
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    // 班级搜索下拉
    async urriculumInfo() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list"
      );
      this.urriculumInfos = res.data.list;
    },
    //  获取班级管理列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classes/list",
        { params: this.queryInfo }
      );
      this.total = res.data.counts;
      this.tableData = res.data.list;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
});
</script>
<style>
.body {
  display: flex;
}

.asbodyinfoa {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0;
  background-color: rgb(247, 246, 248);
}
.buttons {
  line-height: 50px;
  width: 185px;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.infoadd {
  width: 100px;
  height: 50px;
  background-color: rgb(246, 249, 250);
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.block {
  margin-left: 15px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
.infosa {
  width: 25%;
}
.classinfow {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 50px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classinfowdiv:nth-child(2) {
  line-height: 30px;
}
.classInfoas {
  display: flex;
}
.searchas {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
  margin-left: -35px;
  margin-top: -3px;
}
.infoa {
  width: 650px;
  margin-top: 10px;
  margin-left: 30px;
}
.infosaa {
  width: 25%;
}
.bodypk {
  width: 96%;
  display: flex;
}
.bodypk > div {
  margin-left: 30px;
}
.teachera {
  width: 140px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bodypk1 {
  margin-top: 30px;
  margin-left: 30px;
}
.adds {
  margin-top: 25px;
  display: flex;
}
.adds > div {
  margin-right: 80px;
}
.addss {
  display: flex;
  width: 160px;
  justify-content: space-between;
  margin: 25px 0 0 10px;
}
</style>